/*
* @Author: zhushixian
* @Date: 2020-08-10 09:30:48
* @Last Modified by: 朱世贤
* @Last Modified time: 2020-5-27 14:23:03
*
*/
<template>
    <div class='customerBox'>
        <div class='tabBox'>
            <ul class='tabList'>
                <li @click='changeTab(2)' :class='{active :tab==2}' htmdEvt="customerStatusTracked_btn">待注册</li>
                <li @click='changeTab(0)' :class='{active :tab==0}' htmdEvt="customerStatusConcluded_btn">待成交</li>
                <li @click='changeTab(1)' :class='{active :tab==1}' htmdEvt="customerStatusRenewal_btn" style="margin-right:0">已成交</li>
            </ul>
            <ul class='centerList'>
                <li @click='changeSecondTab(2)' class='createDate' htmdEvt="createTime_btn">
                    <span :class="{active: tab1==1 || tab1==2}">
                        创建时间
                        <i class='topArror' :class='{active: tab1==1}'></i>
                        <i class='bottomArror' :class='{active: tab1==2}'></i>
                    </span>

                </li>
                <li @click='changeSecondTab(3)' class='lastDate' htmdEvt="lastDate_btn">
                    <span :class="{active: tab2==1 || tab2==2}">
                        上次接触时间
                        <i class='topArror' :class='{active: tab2==1}'></i>
                        <i class='bottomArror' :class='{active: tab2==2}'></i>
                    </span>

                </li>
                <li :class="{active: tab3}" @click='changeSecondTab(4)' htmdEvt="customerSelect_btn">筛选</li>
            </ul>
        </div>
        <div class="emptblock"></div>
        <!-- <div style="{'-webkit-overflow-scrolling': scrollMode}"> -->
        <mt-loadmore id='refresh' :top-method="loadTop" :bottom-all-loaded="allLoaded" ref="allLoadMore" :bottomDistance="30" v-if="!showNoData">
            <!-- <loading :showLoading="showLoading" style="padding-top: 30%"></loading> -->
            <div class='customerList'>
                <ul
                    v-infinite-scroll="loadMore"
                    infinite-scroll-disabled="busy"
                    infinite-scroll-immediate-check="true"
                    infinite-scroll-distance="20">
                    <li v-for='(item, index) in getData' :key='index' @click="gotoDetail(item)" htmdEvt="goDetail_btn">
                        <div class='itemTop'>
                            <div class='topLeft'>
                                <span class='title'>{{item.customerName}}</span>
                                <!--后台返回字段custSignList 为数组【0，1，2】 也有可能是 【1】或【0，2】-->
                                <!--0 代表明泽服务  1代表明泽专属    2代表金投客户-->
                                <!--例：indexOf(1) 在数组里找 有没有1这个值，有的话就是显示 明泽专属，没有就不显示，其他同理-->
                                <img src="../../../img/customerCenter/mzzs.png" alt="" v-if="item.custSignList.indexOf(1)>-1">
                                <img src="../../../img/customerCenter/mzfw.png" alt="" v-if="item.custSignList.indexOf(0)>-1">
                                <img src="../../../img/customerCenter/jtkh.png" alt=""  v-if="item.custSignList.indexOf(2)>-1">


                            </div>
                            <!-- 合并持仓区域 -->
                            <div class="topBottom" v-if="item.newLabelList == null ? false : item.newLabelList.length == 0 ? false : true">
                                <span class="sign" v-for="(sign,index) in item.newLabelList" :key="index">{{sign}}</span>
                                <!-- <span class="sign" v-for="(sign,index) in ssf">{{sign}}</span> -->
                            </div>

                        </div>
                        <div class='itemCenter' style="padding: 0 0.75rem 0.6rem 0.75rem">
                            <div class='centerLeft'>
                                本月跟踪&nbsp;&nbsp;({{item.recordCount >= 100 ? '99+' : item.recordCount}})
                            </div>
                            <div style="width: 7.7rem">
                                最近跟踪&nbsp;&nbsp;{{item.lastTime ? item.lastTime : '- -'}}
                            </div>
                            <div class="risk" v-if="item.riskType">
                                {{typeList[item.riskType]}}
                            </div>
                            <div style="width: 1.8rem" v-else></div>
                        </div>
                    </li>
                </ul>
            </div>
            <noMore v-if="noMore" :colorData = 'listPage'></noMore>
        </mt-loadmore>
        <!-- 左侧抽屉内容 -->
        <div class='searchContentBox'  :class='{active:searchBlockShow}' id="mask">
            <div class='searchMask' @click='searchBlockHide(999)' htmdEvt="clickMask_btn"></div>
            <div class='searchContent'>
                <div class='contentBox' v-if="tab == 1">
                    <p class='contentTitle'>是否持仓（私募，公募，国际资本）</p>
                    <div class='contentList'>
                        <button @click='buttonChoose(1,null)' :class="{active:btn1===null}" htmdEvt="clickPositionAll_btn">全部</button>
                        <button @click='buttonChoose(1,0)' :class="{active:btn1==0}" htmdEvt="clickPositionHave_btn">有持仓</button>
                        <button @click='buttonChoose(1,1)' :class="{active:btn1==1}" htmdEvt="clickPositionNo_btn">空仓</button>
                    </div>
                </div>
                <div class='contentBox'>
                    <p class='contentTitle'>客户类型</p>
                    <div class='contentList'>
                        <button @click='buttonChoose(2,null)' :class="{active:btn2==null}" htmdEvt="clickCustypeAll_btn">全部</button>
                        <button @click='buttonChoose(2,0)' :class="{active:btn2===0}" htmdEvt="clickCustypeMechanism_btn">机构客户</button>
                        <button @click='buttonChoose(2,1)' :class="{active:btn2==1}" htmdEvt="clickCustypePeople_btn">个人客户</button>
                    </div>
                </div>
                <div class='contentBox' v-if="tab != 2">
                    <p class='contentTitle'>是否明泽专属</p>
                    <div class='contentList'>
                        <button @click='buttonChoose(3,null)' :class="{active:btn3==null}" htmdEvt="clickExclusiveAll_btn">全部</button>
                        <!-- <button @click='buttonChoose(3,0)' :class="{active:btn3==0}">非专属客户</button> -->
                        <button @click='buttonChoose(3,1)' :class="{active:btn3==1}" htmdEvt="clickExclusiveYes_btn">明泽专属</button>
                    </div>
                </div>
                <div class='contentBox' v-if="tab != 2">
                    <p class='contentTitle'>是否金投客户</p>
                    <div class='contentList'>
                        <button @click='buttonChoose(9,null)' :class="{active:btn9==null}" htmdEvt="clickJjsAll_btn">全部</button>
                        <button @click='buttonChoose(9,5)' :class="{active:btn9==5}" htmdEvt="clickJjsYes_btn">是</button>
                        <button @click='buttonChoose(9,0)' :class="{active:btn9==0}" htmdEvt="clickJisNo_btn">否</button>
                    </div>
                </div>
                <div class='contentBox' v-if="tab != 2">
                    <p class='contentTitle'>客户来源系统</p>
                    <div class='contentList'>
                        <button @click='buttonChoose(5,null)' :class="{active:btn5==null}" htmdEvt="clickSourceAll_btn">全部</button>
                        <button @click='buttonChoose(5,17)' :class="{active:btn5==17}" htmdEvt="clickSourceOn_btn">老带新</button>
                        <button @click='buttonChoose(5,2)' :class="{active:btn5==2}" htmdEvt="clickMarketing_btn">营销活动</button>
                        <button @click='buttonChoose(5,26)' :class="{active:btn5==26}" htmdEvt="clickOnline_btn">线上活动</button>
                        <button @click='buttonChoose(5,23)' :class="{active:btn5==23}" htmdEvt="clickWechat_btn">微信获客</button>
                        <button @click='buttonChoose(5,5)' :class="{active:btn5==5}" htmdEvt="clickPeon_btn">人工录入</button>
                        <button @click='buttonChoose(5,30)' :class="{active:btn5==30}" htmdEvt="clickSmallCard_btn">微名片</button>
                    </div>
                </div>
                <div class='contentBox' v-if="tab != 2">
                    <p class='contentTitle'>是否在交易中（私募和通用模式）</p>
                    <div class='contentList'>
                        <button @click='buttonChoose(8,null)' :class="{active:btn8==null}" htmdEvt="clickTransactionAll_btn">全部</button>
                        <button @click='buttonChoose(8,2)' :class="{active:btn8==2}" htmdEvt="clickTransaction_btn">交易中</button>
                    </div>
                </div>
                <div class='contentBox' v-if="tab != 2">
                    <p class='contentTitle'>客户标识</p>
                    <div class='contentList'>
                        <button @click='buttonChoose(6,null)' :class="{active:btn6==null}" htmdEvt="clickCusignAll_btn">全部</button>
                        <button @click='buttonChoose(6,0)' :class="{active:btn6==0}" htmdEvt="clickCusignHigh_btn">高关注</button>
                        <button @click='buttonChoose(6,1)' :class="{active:btn6==1}" htmdEvt="clickCusignInter_btn">高互动</button>
                        <button @click='buttonChoose(6,2)' :class="{active:btn6==2}" htmdEvt="clickCusignInterlow_btn">低互动</button>
                        <button @click='buttonChoose(6,3)' :class="{active:btn6==3}" htmdEvt="clickCusignInterNo_btn">无互动</button>
                        <button @click='buttonChoose(6,4)' :class="{active:btn6==4}" htmdEvt="clickCusignInvalid_btn">无效客户</button>
                    </div>
                </div>
                <div class='contentBox'>
                    <p class='contentTitle'>客户分类</p>
                    <div class='contentList'>
                        <button @click='buttonChoose(7,null)' :class="{active:btn7==null}" htmdEvt="clickClassificationAll_btn">全部</button>
                        <button @click='buttonChoose(7,1)' :class="{active:btn7==1}" htmdEvt="clickClassificationA_btn">A类客户</button>
                        <button @click='buttonChoose(7,2)' :class="{active:btn7==2}" htmdEvt="clickClassificationB_btn">B类客户</button>
                        <button @click='buttonChoose(7,3)' :class="{active:btn7==3}" htmdEvt="clickClassificationC_btn">C类客户</button>
                    </div>
                </div>
                <div class='contentBox' v-if="tab != 2">
                    <p class='contentTitle'>客户等级</p>
                    <div class='contentList'>
                        <button @click='buttonChoose(4,null)' :class="{active:btn4==null}" htmdEvt="clickGradeAll_btn">全部</button>
                        <button @click='buttonChoose(4,0)' :class="{active:btn4==0}" htmdEvt="clickGradeWealth_btn">财富客户</button>
                        <button @click='buttonChoose(4,1)' :class="{active:btn4==1}" htmdEvt="clickGradeGinkgo_btn">银杏级</button>
                        <button @click='buttonChoose(4,2)' :class="{active:btn4==2}" htmdEvt="clickGradePlatinum_btn">白金级</button>
                        <button @click='buttonChoose(4,3)' :class="{active:btn4==3}" htmdEvt="clickGradeBlackgold_btn">黑金级</button>
                        <button @click='buttonChoose(4,4)' :class="{active:btn4==4}" htmdEvt="clickGradeBiamonds_btn">黑钻级</button>
                        <button @click='buttonChoose(4,5)' :class="{active:btn4==5}" htmdEvt="clickGradeSuperbiamonds_btn">超级黑钻</button>
                    </div>
                </div>
                <div style="height: 3rem"></div>

                <div class='searchButton'>
                    <button class='resetBtn' @click='resetClick()' htmdEvt='customerReset_btn' >重置</button>
                    <button class='confirmBtn' @click='searchBlockHide(1)' htmdEvt='customerConfirm_btn'>确定</button>
                </div>
            </div>
        </div>
        <!--显示加载中状态-->
        <div class="loadingBox" v-if="loading">
            <mt-spinner type="snake" class="loading-more"  color="#FF8637"></mt-spinner>
        </div>

        <no-data :showNoData="showNoData" :show="show"></no-data>
    </div>
</template>

<script  type="text/javascript">
window.FromAppRefresh = function (statusCode) {
    getVueMethod();
}
import "./customerList.less";
import noData from '@src/common/components/noData/noData';
import noMore from '@src/common/noMore/noMore';

export default {
    name: "detail",
    components:{
        noData,noMore
    },
    data() {
        return {
            // ssf:['无效客户','无效','无客户','客户','无效哈哈哈哈哈','无效','无效客户','无效客户','无效客户','无效客户','无效客户','无效客户','无效客户','无效客户','无效客户','无效客户','无效客户','无效客户','无效客户','无效客户','无效客户'],
            typeList:['','保守型','稳健型','平衡型','成长型','进取型'],
            listPage: '#F2F3F5', // 自定义noMore颜色
            tab: 2,
            tab1: 2,//创建时间排序的标识
            tab2: '',//上次接触时间排序的标识
            tab3: false,
            btn1: null,
            btn2: null,
            btn3: null,
            btn4: null,
            btn5: null,
            btn6: null,
            btn7: null,
            btn8: null,
            btn9:null,
            searchBlockShow: false, // 左侧抽屉显示
            showLoading: true, //显示loading
            showNoData: false, //不显示暂无数据
            sendData:{ // 获取接口时需要的参数
                pageNum:1, //当前页
                pageSize: 10, //每页展示数量
                orderBy: 2, //排序2:创建时间排序3:上次接触时间排序
                sort: null, // asc:升序 desc:降序
                isParamFlag: 0, //是否为模糊搜索，0：初始化列表， 1:是模糊搜索
                dealStatus: 2, // 0：未成交（待成交） 1：已成交 2待注册（跟踪客户）
                custType: null, // 0:机构 1:个人
                isMain: null, // 0:非专属 1:专属
                tier: null, // 1银杏会员 2白银会员 3黄金会员 4白金会员 5黑金会员 6钻石会员 7黑钻会员
                systemSource: null, //17：老带新 2：营销活动 26：线上活动 23：微信获客 5：人工录入
                custIdentif: null, //客户标识（直接传汉字）高关注 高互动 低互动 无互动 无效客户
                scoreResult: null,  //1：A类客户 2：B类客户 3：C类客户
                isInTrade: null, // 1:交易中 （默认传null)
                positionStatus: '' ,//是否持仓,
                isJjsCustomer: null,
            },
            getData:[], //接口返回数据数组
            allLoaded: false, //可进行上拉
            show: 'show', // nodata组件需要的参数
            loading: false, // 加载中的状态
            noMore: false, // 没有更多的状态
            nopage: false, // 没有下一页判断
            type: '',// 判断加载类型，是下拉刷新亦或上拉加载
            busy: false, // 用于无限循环组件是否可以使用
            debounceInit: null, //用于防止多次跳转页面
            PRIVATE_NO_ISMAIN:false,//私募非专属
            PRIVATE_ISMAIN:false, // 私募专属
            JJS_ISMAIN:false,//金投专属
        };
    },
    created(){
        this.loadTop();
    },
    mounted () {
        window.getVueMethod = this.initData;
    },
    methods: {
        initData () {
            // this.changeTab(null)
        },
        // 抽屉层关闭事件
        searchBlockHide(type) {
            this.searchBlockShow = false
            this.sendData.isParamFlag = 1
            // 去掉加在body上的样式，恢复页面滚动
            var pageNo = document.getElementsByTagName('body')[0]
            pageNo.style.cssText = ''
            // 点击别处关闭抽屉时不要请求接口
            if(type == 1){
                this.$parent.changeLoading(true)
                this.loadTop()
            }
        },
        // 抽屉中选择各个按钮
        buttonChoose(num,val){
            if(num == 1){
                this.btn1 = val
                if(val == 0){
                    this.sendData.positionStatus = '是'
                }else if(val == 1){
                    this.sendData.positionStatus = '否'
                }else{
                    this.sendData.positionStatus = ''
                }
            }else if(num==2){
                this.btn2=val;
                this.sendData.custType = val
            }else if(num==3){
                this.btn3=val;
                this.sendData.isMain = val
            }else if(num==4){
                this.btn4=val;
                this.sendData.tier = val
            }else if(num==5){
                this.btn5=val;
                this.sendData.systemSource = val
            }else if(num==6){
                this.btn6=val
                if(val == 0){
                    this.sendData.custIdentif = '高关注'
                }else if(val == 1){
                    this.sendData.custIdentif = '高互动'
                }else if(val == 2){
                    this.sendData.custIdentif = '低互动'
                }else if(val == 3){
                    this.sendData.custIdentif = '无互动'
                }else if(val == 4){
                    this.sendData.custIdentif = '无效客户'
                }else{
                    this.sendData.custIdentif = ''
                }
            }else if(num == 7){
                this.btn7=val
                this.sendData.scoreResult = val
            }else if(num == 8){
                this.btn8 = val
                this.sendData.isInTrade = val
            }else if(num == 9) {
                this.btn9 = val
                this.sendData.isJjsCustomer =val
            }
        },
        //点击重置按钮
        resetClick(){
            this.btn1 = null
            this.btn2 = null
            this.btn3 = null
            this.btn4 = null
            this.btn5 = null
            this.btn6 = null
            this.btn7 = null
            this.btn9 = null
            this.btn8 = null
            this.sendData.custType = null
            this.sendData.isMain = null
            this.sendData.tier = null
            this.sendData.systemSource = null
            this.sendData.custIdentif = null
            this.sendData.scoreResult = null
            this.sendData.isInTrade = null
            this.sendData.positionStatus = ''
        },
        // 跳转到详情
        gotoDetail (item) {
            let params = {
                customerId:item.customerNo || '--',
                customerSource: item.customerSource
            }
            if(window.appIsIOS){
                this.debounceInit = this.debounce(window.webkit.messageHandlers.gotoCustomerDetail.postMessage(JSON.stringify(params)), 1000)
            }else{
                this.debounceInit = this.debounce(window.jsObj.gotoCustomerDetail(JSON.stringify(params)), 1000)
            }

        },
        // 防抖
        debounce (fn, t) {
            const delay = t || 500
            let timer
            return function () {
                const args = arguments
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    timer = null
                    fn.apply(this, args)
                }, delay)
            }
        },
        //tab切换
        changeTab(val){
            scrollTo(0,0);
            this.tab = val;
            this.tab1= 2;
            this.tab2 = '';
            this.tab3 = false
            this.sendData.dealStatus = val;
            this.sendData.isParamFlag = 0
            // 切换客户时，排序恢复初始设置
            this.sendData.orderBy = 2;
            this.sendData.pageNum = 1
            this.showNoData = false
            this.loadZx =false
            // this.busy = false
            this.sendData.sort = null;
            this.showLoading = true;
            this.type = 'loadTop'
            this.noMore = false
            this.nopage = false
            this.$parent.changeLoading(true)
            this.resetClick()
            this.loadTop()
        },
        // 小tab切换
        changeSecondTab(val){
            scrollTo(0,0)
            if(val != 4){
                this.resetClick()
            }
            if(val==1){ // 成交排序
                this.sendData.orderBy = val;
                this.tab1 = ''
                this.tab2 = ''
                this.tab3 = false
                this.loadTop()
            }else if(val==2){ //创建时间排序
                this.sendData.orderBy = val;
                this.tab2 = ''
                if(this.tab1 =='' || this.tab3){
                    this.sendData.sort = 'desc'; // 默认降序排列
                    this.tab1 = 2;
                }else if(this.tab1 == 1){
                    this.sendData.sort = 'desc'; //降序排列
                    this.tab1 = 2;
                }else if(this.tab1 == 2){
                    this.sendData.sort = 'asc'; //升序排列
                    this.tab1 = 1;
                }
                this.tab3 = false
                this.loadTop()
            }else if(val==3){ //上次接触时间
                this.sendData.orderBy = val;
                this.tab1 = ''
                if(this.tab2 =='' || this.tab3){
                    this.sendData.sort = 'desc'; // 默认降序排列
                    this.tab2 = 2;
                }else if(this.tab2 == 1){
                    this.sendData.sort = 'desc'; //降序排列
                    this.tab2 = 2;
                }else if(this.tab2 == 2){
                    this.sendData.sort = 'asc'; //升序排列
                    this.tab2 = 1;
                }
                this.tab3 = false
                this.loadTop()
            }else if(val == 4){ // 筛选选项
                this.tab3 = true
                this.searchBlockShow = true
                // 为了禁止页面滚动设置
                var pageOpen = document.getElementsByTagName('body')[0]
                pageOpen.style.cssText = "position : fixed; top: 0; left: 0; bottom: 0; right: 0"
                this.tab1 = ''
                this.tab2 = ''
                // 筛选后重置筛选为默认倒序时间状态
                this.sendData.sort = 'desc'
                this.sendData.orderBy = 2
            }
        },
        // 初始化数据
        getListData (type) {
            this.showLoading = true;
            this.$axiosHttp.http({
                method: "POST",
                url: apiUrl.getCustomerListApi,
                // needFailCallback: true,
                params:{
                    pageNum: this.sendData.pageNum,
                    pageSize: 10,
                    isParamFlag: this.sendData.isParamFlag,
                    orderBy : this.sendData.orderBy,
                    sort: this.sendData.sort,
                    // statusType: this.sendData.statusType,
                    dealStatus: this.sendData.dealStatus,
                    custType: this.sendData.custType,
                    isMain: this.sendData.isMain,
                    tier: this.sendData.tier,
                    systemSource: this.sendData.systemSource,
                    custIdentif: this.sendData.custIdentif,
                    scoreResult: this.sendData.scoreResult,
                    isInTrade: this.sendData.isInTrade,
                    positionStatus: this.sendData.positionStatus,
                    isJjsCustomer: this.sendData.isJjsCustomer
                }
            }, (res) => {
                // 得到正确的请求数据
                this.showLoading = false;
                this.$parent.changeLoading(false)
                if(res.data.data ==null || res.data.data.length==0 ){
                    this.showNoData = true; //显示暂无数据
                    this.allLoaded = true; //不允许下拉加载
                }else{
                    if(type=='loadTop'){ //代表是下拉刷新
                        this.nopage = false
                        this.noMore = false
                        this.type = 'loadTop'
                        if(res.data.data.length <10){
                            this.nopage = true
                            this.busy = true
                            this.noMore = true
                        }
                        this.getData = res.data.data;
                        this.showNoData = false;
                        this.$refs.allLoadMore.onTopLoaded();
                    }else{ //代表是上拉加载
                        if(this.sendData.pageNum>=res.data.pages){
                            this.getData = this.getData.concat(res.data.data);
                            this.showNoData = false;
                        }else{
                            this.getData = this.getData.concat(res.data.data);
                        }
                    }
                    this.busy = false
                    this.loading = false;
                }
            }, (res) => {
                // 接口报错处理
                this.$parent.changeLoading(false)
                this.$toast(res.data.message)
                // console.log(111111)
                this.noMore = true
                this.loading = false
                this.nopage = true
                return false
            }, (res) => {
                // 没有数据时的处理
                if(type == 'loadTop'){ //说明没有数据
                    this.showNoData = true
                    this.getData = [];
                    this.loading = false
                    this.noMore = false
                }
                else{
                    this.noMore = true
                    this.loading = false
                    this.nopage = true
                    return false
                }
            });
        },
        // 上拉加载
        loadMore() {
            console.log(this.sendData.pageNum + 'lodmore')
            this.sendData.pageNum++;
            this.busy = true
            this.loading = true
            if(!this.nopage) {
                this.type = 'loadMore'
                setTimeout(()=>{
                    this.getListData('loadMore')
                },500)
            }else{
                this.noMore = true
                this.loading = false
                return false
            }

        },
        // 下拉刷新
        loadTop() {
            console.log(this.sendData.pageNum + 'loadTop')
            this.sendData.pageNum = 1;
            this.getListData('loadTop');
        }
    }

};
</script>
